/* 设置body的fontSize */
var setClientfontSize = function () {
    var winClient = document.documentElement.clientWidth;
    var fontSize = winClient < 640 ? winClient / 16 : 20;
    if (fontSize < 20) {
        fontSize = 20;
    }
    document.getElementsByTagName("html")[0].style.fontSize = fontSize + "px";
};
setClientfontSize();
window.onresize = function () {
    setClientfontSize();
};


// 创建音频对象
var chipsmoving = new Audio('./sound/chipsmoving.mp3');
var click = new Audio('./sound/click.mp3');
var ding = new Audio('./sound/ding.mp3');
var lose = new Audio('./sound/lose.mp3');
var reordercard = new Audio('./sound/reordercard.mp3');
var sendcardg = new Audio('./sound/sendcard.mp3');
var win = new Audio('./sound/win.mp3');

// gif保存在内存
window.state_border_red_10s_blob = ""
window.state_border_red_10s_url = ""
fetch('./images/state_border_red_10s.gif')
    .then(r => r.blob())
    .then(b => window.state_border_red_10s_blob = b)
    .then(u => {
        //console.log(u)
    });

// 创建52张牌
// var pokerCardsTypes = ["S", "H", "C", "D"]; // 黑桃、红心、梅花、方块
// var pokerCardsNumbers = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];

// 设置状态（参数包括，需要设置状态的元素，具体状态，筹码）
// function setState(target, state, chips) {
//     return
//     // 开个声音
//     state === 'status__info--countdown' ? true : click.play();
//
//     // 需要设置状态的元素
//     var targetElement = document.getElementsByClassName(target)[0];
//
//     // 设置status__info--countdown
//     if (state === 'status__info--countdown') {
//         window.state_border_red_10s_url = URL.createObjectURL(window.state_border_red_10s_blob)
//         targetElement.getElementsByClassName('status__info--big')[0].style.backgroundImage = 'url(' + window.state_border_red_10s_url + ')'
//         // targetElement.getElementsByClassName('status__info--big')[0].style.backgroundImage = 'url(./images/state_border_red_10s.gif?rand=' + Math.random() + ')'
//     }
//     else {
//         URL.revokeObjectURL(window.state_border_red_10s_url)
//         targetElement.getElementsByClassName('status__info--big')[0].style.backgroundImage = ''
//     }
//
//
//     return  // 下面这些其他地方已经设置了
//
//     // 需要设置状态的元素
//     var targetElement = document.getElementsByClassName(target)[0];
//
//     // 状态
//     targetElement.className = 'status ' + target + ' ' + state;
//
//     // 抛出的筹码
//     if (chips === undefined) return;
//     var chipsInvested = targetElement.getElementsByClassName('status__number')[0];
//     chipsInvested.innerHTML = chips;
//
//     // 剩下的筹码
//     targetElement.getElementsByClassName('status__chips--Leftover')[0].innerHTML = Number(targetElement.getElementsByClassName('status__chips--Leftover')[0].innerHTML) - chips
//
//     // 底池
//     document.getElementsByClassName('center__pot--text')[0].innerHTML = Number(document.getElementsByClassName('center__pot--text')[0].innerHTML) + chips
//
// };


function setState() {
    //最后开click.play()

    // 全部渲染
    for (let i = 0; i < playersMsg.length; i++) {
        // 处理
        // if (playersMsg[i].isTrun && !playersMsg[i].autoCheck && !playersMsg[i].autoFold) {
        //     document.getElementById(playersMsg[i].id).className =
        //         'status ' + 'status--' + (i + 1) + ' ' + 'status__info--countdown';
        //     // 给一秒时间，不然刷新页面时blob有一定可能还没创建
        //     setTimeout(() => {
        //         window.state_border_red_10s_url = URL.createObjectURL(window.state_border_red_10s_blob);
        //         document.getElementById(playersMsg[i].id).getElementsByClassName('status__info--big')[0].style.backgroundImage = 'url(' + window.state_border_red_10s_url + ')'
        //     }, 500)
        // }
        // else {
        //     URL.revokeObjectURL(window.state_border_red_10s_url)
        //     document.getElementById(playersMsg[i].id).getElementsByClassName('status__info--big')[0].style.backgroundImage = ''
        // }


        playersMsg[i].number ?
            document.getElementById(playersMsg[i].id).getElementsByClassName('status__number')[0].innerHTML
            = playersMsg[i].number
            : false;

        if (playersMsg[i].isFold === true && playersMsg[i].robot === false) {
            playersMsg[i].style = 'status__info--fold'
        }
        playersMsg[i].style ?
            document.getElementById(playersMsg[i].id).className
            = 'status status--' + (i + 1) + ' ' + playersMsg[i].style
            : document.getElementById(playersMsg[i].id).className
            = 'status status--' + (i + 1);
    }

}

// 点击加注时调用
function raise() {
    //最后开 click.play();
    document.getElementsByClassName('my__items--raise')[0].style.display === 'block' ?
        document.getElementsByClassName('my__items--raise')[0].style.display = 'none' :
        document.getElementsByClassName('my__items--raise')[0].style.display = 'block';
}


// 开始前渲染
function renderBeforeStarting() {
    document.getElementsByClassName('center__pot--text')[0].innerHTML = pot;
    document.getElementsByClassName('center__item--room-number')[0].innerHTML = '房间号：' + roomNumber;
    document.getElementsByClassName('center__item--ante')[0].innerHTML = '保额：' + roomMsg.winInvest+' 保费：'+ (roomMsg.winOdds == 0? 0 :Math.floor( roomMsg.winInvest/roomMsg.winOdds));
    for (var i = 0; i < playersMsg.length; i++) {
        var target = document.getElementsByClassName('status--' + (i + 1))[0];
        playersMsg[i].id !== null ? target.id = playersMsg[i].id : false;
        target.getElementsByClassName('status__name')[0].innerHTML = playersMsg[i].name;
        target.getElementsByClassName('status__avatar')[0].src = playersMsg[i].avatar || './images/null.png';
        target.getElementsByClassName('status__chips--Leftover')[0].innerHTML = playersMsg[i].statusChipsLeftover;
    }
}

// 每局开始时渲染
function renderEveryRound() {
    for (var i = 0; i < playersMsg.length; i++) {
        var target = document.getElementsByClassName('status--' + (i + 1))[0];
        playersMsg[i].isDealer === true ?
            target.getElementsByClassName('status__dealer')[0].className = "status__dealer status__dealer--hook" :
            target.getElementsByClassName('status__dealer')[0].className = "status__dealer";
    }
}

// 渲染底牌
function renderTheFlop() {
    document.getElementsByClassName('my__img--the-flop-1')[0].src = './images/pokerCards/' + theFlop[0] + '.png';
    document.getElementsByClassName('my__img--the-flop-2')[0].src = './images/pokerCards/' + theFlop[1] + '.png';
}

// 渲染公共牌
var renderCommunityCardPokerTarget = document.getElementsByClassName('center__img')
function renderCommunityCardPoker() {
    if (communityCardPoker.length === 0) {
        renderCommunityCardPokerTarget[0].src = './images/pokerCards/bg.png';
        renderCommunityCardPokerTarget[1].src = './images/pokerCards/bg.png';
        renderCommunityCardPokerTarget[2].src = './images/pokerCards/bg.png';
        renderCommunityCardPokerTarget[3].src = './images/pokerCards/bg.png';
        renderCommunityCardPokerTarget[4].src = './images/pokerCards/bg.png';
    } else if (communityCardPoker.length === 3) {
        renderCommunityCardPokerTarget[0].src = './images/pokerCards/' + communityCardPoker[0] + '.png';
        renderCommunityCardPokerTarget[1].src = './images/pokerCards/' + communityCardPoker[1] + '.png'
        renderCommunityCardPokerTarget[2].src = './images/pokerCards/' + communityCardPoker[2] + '.png'
        renderCommunityCardPokerTarget[3].src = './images/pokerCards/bg.png';
        renderCommunityCardPokerTarget[4].src = './images/pokerCards/bg.png';
    }
    else if (communityCardPoker.length === 4) {
        renderCommunityCardPokerTarget[0].src = './images/pokerCards/' + communityCardPoker[0] + '.png';
        renderCommunityCardPokerTarget[1].src = './images/pokerCards/' + communityCardPoker[1] + '.png'
        renderCommunityCardPokerTarget[2].src = './images/pokerCards/' + communityCardPoker[2] + '.png'
        renderCommunityCardPokerTarget[3].src = './images/pokerCards/' + communityCardPoker[3] + '.png';
        renderCommunityCardPokerTarget[4].src = './images/pokerCards/bg.png';
    }
    else {
        renderCommunityCardPokerTarget[0].src = './images/pokerCards/' + communityCardPoker[0] + '.png';
        renderCommunityCardPokerTarget[1].src = './images/pokerCards/' + communityCardPoker[1] + '.png'
        renderCommunityCardPokerTarget[2].src = './images/pokerCards/' + communityCardPoker[2] + '.png'
        renderCommunityCardPokerTarget[3].src = './images/pokerCards/' + communityCardPoker[3] + '.png';
        renderCommunityCardPokerTarget[4].src = './images/pokerCards/' + communityCardPoker[4] + '.png';
    }
}


// 设置位置，保证玩家在下面
function setLocation() {
    // playersMsg.splice(
    //   playerNumber,
    //   0, // 以6为下标，替换
    //   ...playersMsg.splice(
    //     playersMsg[0+1],
    //     playerNumber, // 以0为下标，删除0-6, 返回0-6
    //   )
    // )
    var MapPlayersMsg = []
    for (var i = 0; i < playersMsg.length - playerNumber; i++) {
        MapPlayersMsg.push(playersMsg[playerNumber + i])
    }
    for (var i = 0; i < playerNumber; i++) {
        MapPlayersMsg.push(playersMsg[i])
    }
    window.playersMsg = MapPlayersMsg;
}

// 设置观战模式
function setSpectatorMode() {
    document.getElementsByClassName('my__buttons')[0].style.display = 'none'
    document.getElementsByClassName('my__img--the-flop ')[0].style.display = 'none'
    document.getElementsByClassName('my__img--the-flop ')[1].style.display = 'none'
    document.getElementsByClassName('guanliyuan')[0].style.display = 'block'
}


// 初始化数据
function startCoolDown(roomMsg__O){
    window.roomMsg = roomMsg__O; // 包含下面所有
    window.playersMsg = roomMsg.playersMsg // 玩家们的数据
    setLocation(); // 调整位置，保证玩家在下面
    for (let i = 0; i < playersMsg.length; i++) {
        if (playersMsg[i].isTrun && !playersMsg[i].autoCheck && !playersMsg[i].autoFold) {
            // document.getElementById(playersMsg[i].id).className =
            //     'status ' + 'status--' + (i + 1) + ' ' + 'status__info--countdown';
            // 给一秒时间，不然刷新页面时blob有一定可能还没创建
            setTimeout(() => {
                window.state_border_red_10s_url = URL.createObjectURL(window.state_border_red_10s_blob);
                document.getElementById(playersMsg[i].id).getElementsByClassName('status__info--big')[0].style.backgroundImage = 'url(' + window.state_border_red_10s_url + ')'
            }, 500)
        } else {
            URL.revokeObjectURL(window.state_border_red_10s_url)
            document.getElementById(playersMsg[i].id).getElementsByClassName('status__info--big')[0].style.backgroundImage = ''
        }
    }
    click.play();
}
function initRoomMsg(roomMsg__O) {

    window.roomMsg = roomMsg__O; // 包含下面所有
    window.ante = roomMsg.ante; // 底注
    window.nowAnte = roomMsg.nowAnte;// 当前底注
    window.pot = roomMsg.pot; // 奖池
    window.isStart = roomMsg.isStart; // 游戏是否开始
    window.playerNumber = roomMsg.playersMsg.findIndex(  // 玩家在服务器里的号数
        array => array.name ===
            new URLSearchParams(window.location.search).get('name')
    );
    window.playersMsg = roomMsg.playersMsg // 玩家们的数据
    setLocation(); // 调整位置，保证玩家在下面
    window.isFold = playersMsg[0].isFold; // 当前玩家是否弃牌
    window.isTrun = playersMsg[0].isTrun; // 是否是当前玩家回合
    window.isDown = playersMsg[0].isDown; //是否允许离开
    window.isWinner = playersMsg[0].isWinner; // 当前玩家是否是当前赢家
    renderBeforeStarting() // 开始前渲染
    renderEveryRound() // 每局开始渲染
    window.wlData = roomMsg.wlData
    roomInfoSwitch()//渲染战绩页面
    loadingShowflop()  //渲染亮牌
    loadingwinOuts() //渲染保险补牌
    if (roomMsg.lastFlop.length != 0) {
        loadingLastFlop()
    } //渲染上一局信息
    window.id = document.getElementsByClassName('status--1')[0].id
    // 底牌
    if (playersMsg[0].theFlop.length > 0) {
        window.theFlop = playersMsg[0].theFlop; // playersMsg是换后的,roomMsg.playersMsg[0]是没换的
        renderTheFlop(); //
    }
    // 公共牌
    window.communityCardPoker = roomMsg.communityCardPoker;
    renderCommunityCardPoker() // 渲染公共牌
    // 状态
    if (isStart) {
        setState()
    }
    var alreadyGo = roomMsg.roundData.bets.findIndex((item)=>item.player === window.playersMsg[0].id)
    if (isStart === true && !isFold ) {
        if (isTrun){
            document.getElementsByClassName('my__all-in')[0].style.display = 'inline-block'
            document.getElementsByClassName('my__fold')[0].style.display = 'inline-block'
            document.getElementsByClassName('my__autofold')[0].style.display = 'none'
            document.getElementsByClassName('my__autocheck')[0].style.display = 'none'
            document.getElementsByClassName('my__checkfold')[0].style.display = 'none'
            document.getElementsByClassName('my__cancel')[0].style.display = 'none'
            if(window.playersMsg[0].number>= nowAnte){
                document.getElementsByClassName('my__bet')[0].style.display = 'inline-block'
                document.getElementsByClassName('my__free')[0].style.display = 'inline-block'
                document.getElementsByClassName('my__raise')[0].style.display = 'none'
                document.getElementsByClassName('my__call')[0].style.display = 'none'
            }else{
                document.getElementsByClassName('my__bet')[0].style.display = 'none'
                document.getElementsByClassName('my__free')[0].style.display = 'none'
                document.getElementsByClassName('my__raise')[0].style.display = 'inline-block'
                document.getElementsByClassName('my__call')[0].style.display = 'inline-block'
            }
        }else{
            document.getElementsByClassName('my__fold')[0].style.display = 'none'
            document.getElementsByClassName('my__bet')[0].style.display = 'none'
            document.getElementsByClassName('my__free')[0].style.display = 'none'
            document.getElementsByClassName('my__raise')[0].style.display = 'none'
            document.getElementsByClassName('my__call')[0].style.display = 'none'
            document.getElementsByClassName('my__all-in')[0].style.display = 'none'
            if (alreadyGo == -1 ||( roomMsg.isBBwent ==false && window.playersMsg[0].blindValue == 'Big Blind')){//本回合未行动
                if (window.playersMsg[0].autoCheck || window.playersMsg[0].autoFold){
                    document.getElementsByClassName('my__autofold')[0].style.display = 'none'
                    document.getElementsByClassName('my__autocheck')[0].style.display = 'none'
                    document.getElementsByClassName('my__checkfold')[0].style.display = 'none'
                    document.getElementsByClassName('my__cancel')[0].style.display = 'inline-block'
                }else if (window.playersMsg[0].number>= nowAnte){
                    document.getElementsByClassName('my__autofold')[0].style.display = 'none'
                    document.getElementsByClassName('my__autocheck')[0].style.display = 'inline-block'
                    document.getElementsByClassName('my__checkfold')[0].style.display = 'inline-block'
                    document.getElementsByClassName('my__cancel')[0].style.display = 'none'
                }else{
                    document.getElementsByClassName('my__autofold')[0].style.display = 'inline-block'
                    document.getElementsByClassName('my__autocheck')[0].style.display = 'none'
                    document.getElementsByClassName('my__checkfold')[0].style.display = 'none'
                    document.getElementsByClassName('my__cancel')[0].style.display = 'none'
                }
            }else{
                document.getElementsByClassName('my__autocheck')[0].style.display = 'none'
                document.getElementsByClassName('my__checkfold')[0].style.display = 'none'
                if (window.playersMsg[0].autoFold){
                    document.getElementsByClassName('my__autofold')[0].style.display = 'none'
                    document.getElementsByClassName('my__cancel')[0].style.display = 'inline-block'
                }else{
                    document.getElementsByClassName('my__autofold')[0].style.display = 'inline-block'
                    document.getElementsByClassName('my__cancel')[0].style.display = 'none'
                }
            }
        }
        if (roomMsg.reveal == true && isWinner) {
                document.getElementsByClassName('my__buyIns')[0].style.display = 'inline-block'
                document.getElementsByClassName('my__nobuyIns')[0].style.display = 'inline-block'
                document.getElementsByClassName('my__fold')[0].style.display = 'none'
                document.getElementsByClassName('my__bet')[0].style.display = 'none'
                document.getElementsByClassName('my__free')[0].style.display = 'none'
                document.getElementsByClassName('my__raise')[0].style.display = 'none'
                document.getElementsByClassName('my__call')[0].style.display = 'none'
                document.getElementsByClassName('my__all-in')[0].style.display = 'none'
                document.getElementsByClassName('my__autofold')[0].style.display = 'none'
                document.getElementsByClassName('my__autocheck')[0].style.display = 'none'
                document.getElementsByClassName('my__checkfold')[0].style.display = 'none'
                document.getElementsByClassName('my__cancel')[0].style.display = 'none'
        } else if (roomMsg.reveal == true || window.playersMsg[0].allIn == true) {
            document.getElementsByClassName('my__buyIns')[0].style.display = 'none'
            document.getElementsByClassName('my__nobuyIns')[0].style.display = 'none'
                document.getElementsByClassName('my__fold')[0].style.display = 'none'
                document.getElementsByClassName('my__bet')[0].style.display = 'none'
                document.getElementsByClassName('my__free')[0].style.display = 'none'
                document.getElementsByClassName('my__raise')[0].style.display = 'none'
                document.getElementsByClassName('my__call')[0].style.display = 'none'
                document.getElementsByClassName('my__all-in')[0].style.display = 'none'
                document.getElementsByClassName('my__autofold')[0].style.display = 'none'
                document.getElementsByClassName('my__autocheck')[0].style.display = 'none'
                document.getElementsByClassName('my__checkfold')[0].style.display = 'none'
                document.getElementsByClassName('my__cancel')[0].style.display = 'none'
        }
    }else{
        // if(isFold){ straddle在这里加
            document.getElementsByClassName('my__fold')[0].style.display = 'none'
            document.getElementsByClassName('my__bet')[0].style.display = 'none'
            document.getElementsByClassName('my__free')[0].style.display = 'none'
            document.getElementsByClassName('my__raise')[0].style.display = 'none'
            document.getElementsByClassName('my__call')[0].style.display = 'none'
            document.getElementsByClassName('my__all-in')[0].style.display = 'none'
            document.getElementsByClassName('my__autofold')[0].style.display = 'none'
            document.getElementsByClassName('my__autocheck')[0].style.display = 'none'
            document.getElementsByClassName('my__checkfold')[0].style.display = 'none'
            document.getElementsByClassName('my__cancel')[0].style.display = 'none'
            document.getElementsByClassName('my__buyIns')[0].style.display = 'none'
            document.getElementsByClassName('my__nobuyIns')[0].style.display = 'none'
        // }
    }

    if (window.roomMsg.currTurn == '0') {
        if (window.roomMsg.nowAnte <= window.roomMsg.bigBlind) {
            // 翻前开池
            document.getElementsByClassName('my__items--raise')[0].innerHTML =
                `
                <!--<li class="my__item&#45;&#45;raise">
                    <button class="my__button&#45;&#45;raise" onclick="submitSetState('status__info&#45;&#45;raise','300')">3bb</button>
                </li>
                <li class="my__item&#45;&#45;raise">
                    <button class="my__button&#45;&#45;raise" onclick="submitSetState('status__info&#45;&#45;raise','500')">5bb</button>
                </li>
                <li class="my__item&#45;&#45;raise">
                    <button class="my__button&#45;&#45;raise" onclick="submitSetState('status__info&#45;&#45;raise','700')">7bb</button>
                </li>
                <li class="my__item&#45;&#45;raise">
                    <button class="my__button&#45;&#45;raise" onclick="submitSetState('status__info&#45;&#45;raise','1000')">10bb</button>
                </li>
                <li class="my__item&#45;&#45;raise">
                    <button class="my__button&#45;&#45;raise" onclick="submitSetState('status__info&#45;&#45;raise','1500')">15bb</button>
                </li>-->
                <div style="margin-top: -10px;">
                  <li class="my__item--raise" ><!--style="margin-top: 2rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','300')">
                      <span class="bb">bb<br><span>3</span></span><br/>                      
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  
                  <li class="my__item--raise"><!--style="margin-top: 0.8rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','500')">
                      <span class="bb">bb<br><span>5</span></span><br/>                      
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  
                  <li class="my__item--raise">
                    <div class="raise_div" onclick="submitSetState('status__info--raise','700')">
                      <span class="bb">bb<br><span>7</span></span><br/>                      
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  <li class="my__item--raise"><!--style="margin-top: 0.8rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','1000')">
                      <span class="bb">bb<br><span>10</span></span><br/>                      
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  <li class="my__item--raise"><!--style="margin-top: 2rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','1500')">
                      <span class="bb">bb<br><span>15</span></span><br/>                      
                    </div>
                    <span class="spn_pot"></span>
                  </li>     
                </div>
                `

                document.getElementsByClassName('spn_pot')[0].innerHTML =3 * roomMsg.bigBlind;
            document.getElementsByClassName('spn_pot')[1].innerHTML =5 * roomMsg.bigBlind;
            document.getElementsByClassName('spn_pot')[2].innerHTML =7 * roomMsg.bigBlind;
            document.getElementsByClassName('spn_pot')[3].innerHTML =10 * roomMsg.bigBlind;
            document.getElementsByClassName('spn_pot')[4].innerHTML =15 * roomMsg.bigBlind;

        }
        else {
            // 翻前加注
            // document.getElementsByClassName('my__items--raise')[0].innerHTML =
            //     `
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','1')">2倍</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','1.5')">2.5倍</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','2')">3倍</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','4')">5倍</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','9')">10倍</button>
            //     </li>
            //     `
            document.getElementsByClassName('my__items--raise')[0].innerHTML =
                `
                <div style="margin-top: -10px;">
                  <li class="my__item--raise" ><!--style="margin-top: 2rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','1')">
                      <span class="bb"><br><span style="font-size: 14px;">2x</span></span><br/>                     
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  
                  <li class="my__item--raise"><!--style="margin-top: 0.8rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','1.5')">
                      <span class="bb"><br><span style="font-size: 14px;">2.5x</span></span><br/>                     
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  
                  <li class="my__item--raise">
                    <div class="raise_div" onclick="submitSetState('status__info--raise','2')">
                      <span class="bb"><br><span style="font-size: 14px;">3x</span></span><br/>                    
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  <li class="my__item--raise"><!--style="margin-top: 0.8rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','4')">
                      <span class="bb"><br><span style="font-size: 14px;">5x</span></span><br/>                     
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  <li class="my__item--raise"><!--style="margin-top: 2rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','9')">
                      <span class="bb"><br><span style="font-size: 14px;">10x</span></span><br/>                      
                    </div>
                    <span class="spn_pot"></span>
                  </li>     
                </div>
                `
            document.getElementsByClassName('spn_pot')[0].innerHTML =2 * roomMsg.nowAnte;
            document.getElementsByClassName('spn_pot')[1].innerHTML =2.5 * roomMsg.nowAnte;
            document.getElementsByClassName('spn_pot')[2].innerHTML =3 * roomMsg.nowAnte;
            document.getElementsByClassName('spn_pot')[3].innerHTML =5 * roomMsg.nowAnte;
            document.getElementsByClassName('spn_pot')[4].innerHTML =10 * roomMsg.nowAnte;
        }
    }
    else {
        if (window.roomMsg.nowAnte === 0) {
            // 翻后起注
            // document.getElementsByClassName('my__items--raise')[0].innerHTML =
            //     `
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','0.3')">0.3底</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','0.5')">0.5底</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','0.8')">0.8底</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','1')">1满</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','1.2')">1.2超</button>
            //     </li>
            //     `
            document.getElementsByClassName('my__items--raise')[0].innerHTML =
                `
                <div style="margin-top: -10px;">
                  <li class="my__item--raise" ><!--style="margin-top: 2rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','0.3')">
                      <span class="bb"><br><span style="font-size: 14px;">0.3</span></span><br/>                     
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  
                  <li class="my__item--raise"><!--style="margin-top: 0.8rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','0.5')">
                      <span class="bb"><br><span style="font-size: 14px;">半池</span></span><br/>                     
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  
                  <li class="my__item--raise">
                    <div class="raise_div" onclick="submitSetState('status__info--raise','0.8')">
                      <span class="bb"><br><span style="font-size: 14px;">0.8</span></span><br/>                    
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  <li class="my__item--raise"><!--style="margin-top: 0.8rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','1')">
                      <span class="bb"><br><span style="font-size: 14px;">满池</span></span><br/>                     
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  <li class="my__item--raise"><!--style="margin-top: 2rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','1.2')">
                      <span class="bb"><br><span style="font-size: 14px;">1.2</span></span><br/>                      
                    </div>
                    <span class="spn_pot"></span>
                  </li>     
                </div>
                `
            document.getElementsByClassName('spn_pot')[0].innerHTML =0.3 * roomMsg.pot;
            document.getElementsByClassName('spn_pot')[1].innerHTML =0.5 * roomMsg.pot;
            document.getElementsByClassName('spn_pot')[2].innerHTML =0.8 * roomMsg.pot;
            document.getElementsByClassName('spn_pot')[3].innerHTML =1 * roomMsg.pot;
            document.getElementsByClassName('spn_pot')[4].innerHTML =1.2 * roomMsg.pot;
        }
        else {
            // 翻后加注
            // document.getElementsByClassName('my__items--raise')[0].innerHTML =
            //     `
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','1')">2倍</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','1.5')">2.5倍</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','2')">3倍</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','4')">5倍</button>
            //     </li>
            //     <li class="my__item--raise">
            //         <button class="my__button--raise" onclick="submitSetState('status__info--raise','9')">10倍</button>
            //     </li>
            //     `
            document.getElementsByClassName('my__items--raise')[0].innerHTML =
                `
                <div style="margin-top: -10px;">
                  <li class="my__item--raise" ><!--style="margin-top: 2rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','1')">
                      <span class="bb"><br><span style="font-size: 14px;">2x</span></span><br/>                     
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  
                  <li class="my__item--raise"><!--style="margin-top: 0.8rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','1.5')">
                      <span class="bb"><br><span style="font-size: 14px;">2.5x</span></span><br/>                     
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  
                  <li class="my__item--raise">
                    <div class="raise_div" onclick="submitSetState('status__info--raise','2')">
                      <span class="bb"><br><span style="font-size: 14px;">3x</span></span><br/>                    
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  <li class="my__item--raise"><!--style="margin-top: 0.8rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','4')">
                      <span class="bb"><br><span style="font-size: 14px;">5x</span></span><br/>                     
                    </div>
                    <span class="spn_pot"></span>
                  </li>
                  <li class="my__item--raise"><!--style="margin-top: 2rem;"-->
                    <div class="raise_div" onclick="submitSetState('status__info--raise','9')">
                      <span class="bb"><br><span style="font-size: 14px;">10x</span></span><br/>                      
                    </div>
                    <span class="spn_pot"></span>
                  </li>     
                </div>
                `
            document.getElementsByClassName('spn_pot')[0].innerHTML =2 * roomMsg.nowAnte;
            document.getElementsByClassName('spn_pot')[1].innerHTML =2.5 * roomMsg.nowAnte;
            document.getElementsByClassName('spn_pot')[2].innerHTML =3 * roomMsg.nowAnte;
            document.getElementsByClassName('spn_pot')[3].innerHTML =5 * roomMsg.nowAnte;
            document.getElementsByClassName('spn_pot')[4].innerHTML =10 * roomMsg.nowAnte;
        }

    }

}

// 提交聊天
// function submitChat() {
//     // 这个地方不要用http请求代替，因为后续可能会使用socket.id
//     socket.emit('chat__to__server',
//         {
//             content: document.getElementsByClassName('chat__input')[0].value,
//             avatar: document.getElementsByClassName('status--1')[0].getElementsByClassName('status__avatar')[0].src,
//             roomNumber: roomNumber, // 房间号
//         });
// }
function showCard(card) {
    // 这个地方不要用http请求代替，因为后续可能会使用socket.id
    socket.emit('showCard',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            id: document.getElementsByClassName('status--1')[0].id,
            card: card
        });
}
// 提交开始游戏
function submitStartGame() {
    if (isStart) return;

    socket.emit('start__game__to__server', {
        roomNumber: roomNumber
    });
}

// 提交状态
function submitSetState(style,multiple) {
    console.log('触发' + style)
    console.log('----------')

    document.getElementsByClassName('my__items--raise')[0].style.display = 'none';// 隐藏加注的复选框
    if (!isStart) return; // 没有开始不许提交
    if (isFold) return; // 弃牌了不许提交
    if (!isTrun) return; // 不是你的回合不行提交

    // if (!isTrun && style == 'status__info--fold') {
    //     preFold = 0 //此时为提前弃牌，不改变istrun
    // } else {
    //     preFold = 1
    // }
    var number = 0; // 设置状态数字
    // 过牌或者跟注
    if (style === 'status__info--call') {
        number = nowAnte;
    }
    // 加注
    else if (style === 'status__info--raise') {
        if (Number(multiple) > 100) {
            nowAnte = Number(multiple) / 5;
            number = nowAnte
        } else {
            if (nowAnte == 0) {
                nowAnte = Number(pot) * Number(multiple);
                number = nowAnte;
            } else {
                nowAnte = Number(nowAnte) * Number(multiple) + Number(nowAnte);
                number = nowAnte;
            }
        }
    }
    // all in
    if (style === 'status__info--all-in') {
        number = window.playersMsg[0].statusChipsLeftover + window.playersMsg[0].number
    }
    if (number >= window.playersMsg[0].statusChipsLeftover + window.playersMsg[0].number) {
        number = window.playersMsg[0].statusChipsLeftover + window.playersMsg[0].number;
        style === 'status__info--all-in';
    }
    number = Math.ceil(number)
    socket.emit('set__state__to__server',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            id: document.getElementsByClassName('status--1')[0].id,
            style: style,
            number: number,
        });
}

function buyInsurance(number, invest, outs, buy) {
    socket.emit('Insurance',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            id: document.getElementsByClassName('status--1')[0].id,
            number: number,
            conpensation: invest,
            outs: outs,
            buy: buy,
        });
}
function submitLeave() {
    if (!isTrun) {
        preFold = 1 //此时为提前弃牌，不改变istrun
    } else {
        preFold = 0
    }
    socket.emit('leave',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            id: document.getElementsByClassName('status--1')[0].id,
        });
    socket.emit('set__state__to__server',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            id: document.getElementsByClassName('status--1')[0].id,
            style: 'status__info--fold',
            preFold: preFold,
        });
    if (isDown) {
        window.location.href = ' http://localhost:3000/login.html'
        // if(roomMsg.playersMsg.filter((item)=>item.exit = false).length == 1 ) {
        //     socket.emit('clear',
        //         {
        //             roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
        //         });
        // }
    }
}
function sc() { //清场
    socket.emit('clear',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
        });
}
function submitBack() {
    socket.emit('back',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            id: document.getElementsByClassName('status--1')[0].id,
        });
}
function submitBuyin(number) {
    //下面这个console.log做一个弹窗提示
    //console.log('带入成功，将在下一手牌更新')
    alert("带入成功，将在下一手牌更新");
    socket.emit('buyIn',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            id: document.getElementsByClassName('status--1')[0].id,
            number: parseInt(number),
        });
}

// 替代window.onload
function initCalculator() {
    if (document.documentElement.dataset['calcLoaded'] === 'true') return;
    // 获取数据
    axios.get(
        'http://localhost:3000/getRoomMsg',
        {
            params: {
                roomNumber: roomNumber,
            }
        }
    ).then((response) => {
        if (response.data.code !== 200) {
            window.alert(response.data.prompt);
            return;
        };
        initRoomMsg(response.data.roomMsg)
    }).catch((error) => {
        console.log(error)
    });

    if (new URLSearchParams(window.location.search).get('isAdmin') === 'true') {
        setSpectatorMode()
    }

    document.documentElement.dataset['calcLoaded'] = 'true';
}


if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initCalculator);
}
else if (document.readyState === 'interactive' || document.readyState === 'complete') {
    initCalculator();
}



window.roomNumber = new URLSearchParams(window.location.search).get('roomNumber');

var socket = io.connect('http://localhost:3000?groupid=' + roomNumber);


socket.on('start__game__to__client', function (data) {
    submitStartGame();
})
// 响应聊天
socket.on('chat__to__client', function (data) {
    document.getElementsByClassName('chat__items')[0].innerHTML =
        document.getElementsByClassName('chat__items')[0].innerHTML +
        `
            <li class="chat__item">
                <p class="chat__paragraph">${JSON.parse(data).name}</p>
                <span onclick="chatCopy(event)" class="chat__text">${JSON.parse(data).content}</span>
                <img class="chat__avatar" src="${JSON.parse(data).avatar}" alt="">
            </li>
        `

    document.getElementById(JSON.parse(data).id).getElementsByClassName('status__chat')[0].style.display = 'inline-block';
    document.getElementById(JSON.parse(data).id).getElementsByClassName('status__chat')[0].innerHTML =
        `<p>${JSON.parse(data).content}</p>`

    document.getElementsByClassName('chat__input')[0].value = '';
    setTimeout(() => {
        document.getElementById(JSON.parse(data).id).getElementsByClassName('status__chat')[0].style.display = 'none';
    }, 5000);
});


// 聊天复制 
function chatCopy(event) {
    document.getElementsByClassName('chat__input')[0].value = event.target.innerHTML;
}

function fn(callback) {
    fn.prototype.init(callback);
}
fn.prototype = {
    canclick: true,
    init: function (callback) {
        if (this.canclick) {
            this.canclick = false
            callback();
            setTimeout(function () {
                this.canclick = true
            }.bind(this), 2000)
        } else {
            window.alert('2秒只能发送一条消息')
        }
    }
}
function submitAutoCheck(){
    socket.emit('AutoMove',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            id: document.getElementsByClassName('status--1')[0].id,
            style: 'check',
        });
}
function submitAutoFold(){
    socket.emit('AutoMove',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            id: document.getElementsByClassName('status--1')[0].id,
            style: 'fold',
        });
}
function submitCheckFold(){
    socket.emit('AutoMove',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            id: document.getElementsByClassName('status--1')[0].id,
            style: 'checkfold',
        });
}
function submitNone(){
    socket.emit('AutoMove',
        {
            roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            id: document.getElementsByClassName('status--1')[0].id,
            style: 'clear',
        });
}
function submitChat() {
    // 这个地方不要用http请求代替，因为后续可能会使用socket.id
    // if(document.getElementsByClassName('chat__input')[0].value  === '') {
    //     console.log('不能为空')
    //     return
    // };
    fn(function () {
        socket.emit('chat__to__server',
            {
                id: document.getElementsByClassName('status--1')[0].id,
                name: document.getElementsByClassName('status--1')[0].getElementsByClassName('status__name')[0].innerHTML,
                content: document.getElementsByClassName('chat__input')[0].value,
                avatar: document.getElementsByClassName('status--1')[0].getElementsByClassName('status__avatar')[0].src,
                // roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            });
    });
}
//wlData点击
function roomInfoSwitch() {
    var html = '';
    html += "<tr>"
    html += "<td class='room__tag'>玩家</td>"
    html += "<td class='room__tag'>带入</td>"
    html += "<td class='room__tag'>当前</td>"
    html += "<td class='room__tag'>盈亏</td>"
    html += "</tr>"
    if (undefined != wlData && wlData.length > 0) {
        for (let i = 0; i < wlData.length; i++) {
            html += "<tr>"
            html += "<td class=\"room__tag\">" + wlData[i].name + "</td>"
            html += "<td class=\"room__tag\">" + wlData[i].bringin + "</td>"
            html += "<td class=\"room__tag\">" + wlData[i].asset + "</td>"
            html += "<td class=\"room__tag\">" + wlData[i].grade + "</td>"
            html += "</tr>"
        }
    }
    if (undefined != wlData && wlData.length == 0) {
        wlData = [];
    }
    document.getElementById("tabData").innerHTML = html;
};
//初始化showFlop
function loadingShowflop() {
    for (let i = 0; i < window.playersMsg.length; i++) {
        if (undefined != playersMsg[i].showFlop && playersMsg[i].showFlop.length > 0) {
            var html = "";
            html += "<img style='width: 1rem;height: 1.7rem;' src='./images/pokerCards/" + playersMsg[i].showFlop[0] + ".png'>"
            if(playersMsg[i].showFlop.length > 1) {
                html += "<img style='width: 1rem;;height: 1.7rem;' src='./images/pokerCards/" + playersMsg[i].showFlop[1] + ".png'>"
            }
        }
        else {
            var html = "";
        }
        document.getElementById(i + "_flop").innerHTML = html;
    }
}
function loadingwinOuts() {

    if (undefined != roomMsg && roomMsg.reveal == true && roomMsg.winOuts.length > 0) {
        var html = '';
        for (let i = 0; i < roomMsg.winOuts.length; i += 5) {
            html += "<tr>"
            for (let j = i; j < i + 5 && j < roomMsg.winOuts.length; j++) {
                html += "<td><img class='outsImg' src='./images/pokerCards/" + roomMsg.winOuts[j] + ".png'/></td>"
            }
            html += "</tr>"
        }
    } else {
        var html = '';
    }
    document.getElementById("outsTab").innerHTML = html;
}
function loadingLastFlop(){
    //  lastflop每个人都会渲染，无需清空
    if(undefined != roomMsg){
        var publicItem = document.getElementsByClassName('public__center__img');
        publicItem[0].src = './images/pokerCards/' + (roomMsg.communityCardPokerLastround.length > 0 ? roomMsg.communityCardPokerLastround[0]:'bg')+ '.png';
        publicItem[1].src = './images/pokerCards/' + (roomMsg.communityCardPokerLastround.length > 0 ? roomMsg.communityCardPokerLastround[1]:'bg')+ '.png';
        publicItem[2].src = './images/pokerCards/' + (roomMsg.communityCardPokerLastround.length > 0 ? roomMsg.communityCardPokerLastround[2]:'bg')+ '.png';
        publicItem[3].src = './images/pokerCards/' + (roomMsg.communityCardPokerLastround.length > 3 ? roomMsg.communityCardPokerLastround[3]:'bg')+ '.png';
        publicItem[4].src = './images/pokerCards/' + (roomMsg.communityCardPokerLastround.length > 4 ? roomMsg.communityCardPokerLastround[4]:'bg')+ '.png';


        if(undefined != roomMsg.lastFlop && roomMsg.lastFlop.length > 0){
            var html = ' ';
            for (let i = 0; i < roomMsg.lastFlop.length; i ++) {
                html += "<tr>"
                html += "<td><div style='font-size: 0.6rem;color: white;display: inline;'>" + (undefined != roomMsg.lastFlop[i].name ? roomMsg.lastFlop[i].name : "") + "</div></td>"
                html += "<td><img class='public__item--img' src='./images/pokerCards/" + (roomMsg.lastFlop[i].showFlop.length > 0 ? roomMsg.lastFlop[i].showFlop[0] : 'bg') + ".png'>"
                html += "<img class='public__item--img' src='./images/pokerCards/" + (roomMsg.lastFlop[i].showFlop.length > 1 ? roomMsg.lastFlop[i].showFlop[1] : 'bg') + ".png'></td>"
                html +=  "<td><div style='font-size: 0.6rem;color: white;display: inline;'>" +(undefined != roomMsg.lastFlop[i].hand ? roomMsg.lastFlop[i].hand : "") + "</div></td>"
                html += "</tr>"
                html += "<tr>"
                html +=  "<td></td>"
                html +=  "<td><div style='font-size: 0.6rem;color: green;display: inline;'>" +(undefined != roomMsg.lastFlop[i].totalBet ? roomMsg.lastFlop[i].totalBet : "") + "</div></td>"
                html +=  "<td><div style='font-size: 0.6rem;color: red;display: inline;'>" +(undefined != roomMsg.lastFlop[i].winPot ? roomMsg.lastFlop[i].winPot : "") + "</div></td>"
                html += "</tr>"
            }
            html += "<td colspan='2' rowspan='" + roomMsg.lastFlop.length + "'><button class='chat__tag' onclick='publicTabBtn()'>看牌</button></td>"
            document.getElementById("publicTab").innerHTML = html;
        }
    }
}

socket.on('getout', function (data) {
    window.location.href = ' http://localhost:3000/login.html'
})
// 渲染游戏
socket.on('rendering__game__to__client', function (data) {
    initRoomMsg(JSON.parse(data))
});

socket.on('win', function (data) {
    if (window.playersMsg[0].name == data.name) {
        socket.emit('chat__to__server',
            {
                id: document.getElementsByClassName('status--1')[0].id,
                name: document.getElementsByClassName('status--1')[0].getElementsByClassName('status__name')[0].innerHTML,
                content: data.name+'通过' + data.hand + '赢得' + data.pot,
                avatar: document.getElementsByClassName('status--1')[0].getElementsByClassName('status__avatar')[0].src,
                // roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
            });
    }
});

socket.on('autoFold', function (data) {
    if (window.playersMsg[0].id == data ) {
        socket.emit('set__state__to__server',
            {
                roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
                id: document.getElementsByClassName('status--1')[0].id,
                style: 'status__info--fold',
            });
    }
});
socket.on('autoCheck', function (data) {
    if (window.playersMsg[0].id == data) {
        socket.emit('set__state__to__server',
            {
                roomNumber: new URLSearchParams(window.location.search).get('roomNumber'), // 房间号
                id: document.getElementsByClassName('status--1')[0].id,
                style: 'status__info--free',
            });
    }
});
socket.on('coolDown',function(data){
    startCoolDown(JSON.parse(data))
});
socket.on('cooldownfold', function (data) {
    if (document.getElementsByClassName('status--1')[0].id == data) {
        submitSetState('status__info--fold')
    }
});
socket.on('callInsurance', function (data) {
    console.log('当前赢家' + data.winner + '补牌：' + data.outs + '投保额度：' + Math.ceil(data.invest / data.odds))

});

/*********************************************************************************/

